<template>
  <div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="规则编号"
        hasFeedback
        validateStatus="success"
      >
        <a-input
          placeholder="规则编号"
          v-decorator="[
            'no',
            {rules: [{ required: true, message: '请输入规则编号' }]}
          ]"
          :disabled="true"
        ></a-input>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="服务调用次数"
        hasFeedback
        validateStatus="success"
      >
        <a-input-number
          :min="1"
          style="width: 100%"
          v-decorator="['callNo', {rules: [{ required: true }]}]"
        />
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="状态"
        hasFeedback
        validateStatus="warning"
      >
        <a-select
          v-decorator="['status', {rules: [{ required: true, message: '请选择状态' }], initialValue: '1'}]"
        >
          <a-select-option :value="1">Option 1</a-select-option>
          <a-select-option :value="2">Option 2</a-select-option>
          <a-select-option :value="3">Option 3</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="描述"
        hasFeedback
        help="请填写一段描述"
      >
        <a-textarea
          :rows="5"
          placeholder="..."
          v-decorator="['description', {rules: [{ required: true }]}]"
        />
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="更新时间"
        hasFeedback
        validateStatus="error"
      >
        <a-date-picker
          style="width: 100%"
          showTime
          format="YYYY-MM-DD HH:mm:ss"
          placeholder="Select Time"
          v-decorator="['updatedAt']"
        />
      </a-form-item>

      <a-form-item v-bind="buttonCol">
        <a-row>
          <a-col span="6">
            <a-button type="primary" html-type="submit">提交</a-button>
          </a-col>
          <a-col span="10">
            <a-button @click="handleGoBack">返回</a-button>
          </a-col>
          <a-col span="8"></a-col>
        </a-row>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import moment from 'moment'
import pick from 'lodash.pick'

export default {
    name: 'TableEdit',
    props: {
        record: {
            type: [Object, String],
            default: ''
        }
    },
    data() {
        return {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 12 }
            },
            buttonCol: {
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 12, offset: 5 }
                }
            },
            form: this.$form.createForm(this),
            id: 0
        }
    },
    // beforeCreate () {
    //   this.form = this.$form.createForm(this)
    // },
    mounted() {
        this.$nextTick(() => {
            this.loadEditInfo(this.record)
        })
    },
    methods: {
        handleGoBack() {
            this.$emit('onGoBack')
        },
        handleSubmit() {
            const {
                form: { validateFields }
            } = this
            validateFields((err, values) => {
                if (!err) {
                    // eslint-disable-next-line no-console
                    console.log('Received values of form: ', values)
                }
            })
        },
        handleGetInfo() {},
        loadEditInfo(data) {
            const { form } = this
            // ajax
            console.log(`将加载 ${this.id} 信息到表单`)
            new Promise(resolve => {
                setTimeout(resolve, 1500)
            }).then(() => {
                const formData = pick(data, ['no', 'callNo', 'status', 'description', 'updatedAt'])
                formData.updatedAt = moment(data.updatedAt)
                console.log('formData', formData)
                form.setFieldsValue(formData)
            })
        }
    }
}
</script>
